<script lang="ts" setup>
import { ref, computed, watch, onMounted, reactive,PropType } from 'vue';
import API from '@/services';
import { useRoute, useRouter } from 'vue-router';
import PageCaontainer from '@/arco-components/PageContainer';
import { approvalType, approvalStatus, statusColor } from '@/constants/approvalCenter'
import DetailTabsItem from './detailTabsItem'
import ModalDialog from '@/components/ModalDialog/index.vue';
import Step from './step'
import { Message } from '@arco-design/web-vue';
import LevelHightIcon from '@/assets/images/level_hight_icon.svg';
import LevelMiddleIcon from '@/assets/images/level_middle_icon.svg';
import LevelSlotIcon from '@/assets/images/level_slot_icon.svg';

const props = defineProps({
    approvalTypePage: {
        type: String || undefined
    }
})
const route = useRoute();
const router = useRouter();
const id = route.params.id
const queryType = route.query.type
const loading = ref<boolean>(false);
const detailTabs = ref<any>()

const defaultActiveId:any=ref()

const modalTitle:any=ref()
const modalVisible:any=ref()
const loginFrom = reactive({
    remark: ''
})
const loginRef :any=ref()
const editApi = async (id:any) => {
    loading.value = true
  try {
    const {code, data, msg} = await API.demand.getGetById({
      id
    });
    if (code === 200) {
        detailTabs.value = data
        if (data?.detailList?.length) {
            defaultActiveId.value = data?.detailList[0].id
        }
    } else if (code === 500) {
        Message.error(msg)
    }
    loading.value = false
  } catch (error) {
    loading.value = false
    console.warn(error);
  }
}

enum levelDemand {
  'HIGH' = LevelHightIcon,
  'MEDIUM' = LevelMiddleIcon,
  'LOW' = LevelSlotIcon,
}
// 审批查看
const approvalDetailApi = async (id:any) => {
    loading.value = true
  try {
    const res = await API.demand.getGetDetailById({
      id
    });
    if (res.code === 200) {
        console.log('审批详情', res)
        detailTabs.value = res.data
    } else if (res.code === 500) {
        Message.error(res.msg)
    }
    loading.value = false
  } catch (error) {
    loading.value = false
    console.warn(error);
  }
}

const handleSubmit = (v:any) => {
    modalVisible.value = true
    modalTitle.value = v
    loginFrom.remark = ''
}
const handleOk = async () => {
      let params:any = {
        id:route.params.id,
        opinion: loginFrom.remark
      };
      if (modalTitle.value === '审批通过') {
        try {
          const { code } = await API.demand.postApproved({ ...params });
          if (code === 200) {
            Message.success('审批成功')
            approveCancel();
            router.go(-1);
          }
        } catch (error) {
          console.log(error);
        }
      } else if (modalTitle.value === '驳回') {
        try {
          const err = await loginRef.value.validate();
          if (err) return
          const { code } = await API.demand.postReject({ ...params });
          if (code === 200) {
            Message.success('驳回成功')
            approveCancel();
            router.go(-1);
          }
        } catch (error) {
          console.log(error);
        }
      }
    };
//审批取消
const approveCancel = () => {
    modalVisible.value = false;
    loginRef.value.resetFields();
};

onMounted(()=>{
    if (props.approvalTypePage === 'approval') {
        approvalDetailApi(id)
    } else {
        editApi(id)
    }
})
</script>


<template>
    <PageCaontainer show-back :title="props.approvalTypePage === 'approval' ? `${approvalType[detailTabs?.demandType]}`: '查看详情'">
        <a-card :class="['approval-center-card', {approvalDetailStyle:props.approvalTypePage === 'approval' && queryType === 'approval'}]">
            <a-spin style="height: 100%;width: 100%;" :loading="loading">
            <div class="check-detail">
                <div class="check-detail-info">
                    <a-row>
                        <a-col :span="12">
                            <a-form-item show-colon label="需求名称">
                                <span>{{detailTabs?.demandName}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item show-colon label="需求类型">
                                <span>{{approvalType[detailTabs?.demandType]}}</span>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row v-if="props.approvalTypePage === 'approval'">
                        <a-col :span="12">
                            <a-form-item show-colon label="优先级">
                                <img :src="levelDemand[detailTabs?.priorityLevel]" alt="" />
                                <span class="ml-6">{{detailTabs?.priorityLevelDesc}}</span>
                            </a-form-item>
                        </a-col> 
                        <a-col :span="12">
                            <a-form-item show-colon label="需求ID">
                                <span>{{detailTabs?.id}}</span>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row v-else>
                        <a-col :span="6">
                            <a-form-item show-colon label="需求状态">
                                <span :class="['dot-col', statusColor[detailTabs?.status+'']]"></span>
                                <span  class="ml-6"> {{detailTabs?.statusDesc}} </span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item show-colon label="优先级">
                                <img :src="levelDemand[detailTabs?.priorityLevel]" alt="" />
                                <span class="ml-6">{{detailTabs?.priorityLevelDesc}}</span>
                            </a-form-item>
                        </a-col> 
                        <a-col :span="6">
                            <a-form-item show-colon label="需求ID">
                                <span>{{detailTabs?.id}}</span>
                            </a-form-item>
                        </a-col>
                    </a-row>

                </div>
                <div v-if="props.approvalTypePage === 'approval'">
                    <a-divider class="myApprovalDivider"/>
                    <div class="approval-detal-content">
                        <DetailTabsItem :metricsId = "detailTabs?.metricsId"/>

                        <div class="approval-precess">
                            <div class="fw metricsStep">指标审批进度</div>
                            <Step :approvalDetailList="detailTabs?.approvalDetailList" />
                        </div>
                    </div> 
                    <a-divider class="myApprovalDivider" v-show="queryType === 'approval'"/>
                    <div class="approva-index-detail-check" v-show="queryType === 'approval'">
                        <a-button @click="() => {
                            $router.go(-1)
                        }">取消</a-button>
                        <a-button type="primary" status="danger" @click="handleSubmit('驳回')">驳回</a-button>
                        <a-button type="primary"  @click="handleSubmit('审批通过')">审批通过</a-button>
                    </div> 
                </div>
                <a-tabs :default-active-key="defaultActiveId" v-else>
                    <a-tab-pane :key="item.id" :title="`指标${index + 1}`" v-for="(item,index) in detailTabs?.detailList">
                        <DetailTabsItem :metricsId = "item.metricsId"/>

                        <div class="approval-precess">
                            <div class="fw metricsStep">指标审批进度</div>
                            <Step :approvalDetailList="item.approvalDetailList" />
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
            </a-spin>
        </a-card>

        <modal-dialog
            class="inlie-login-dialog"
            :modal-visible="modalVisible"
            :modalTitle="modalTitle"
            titleAlign="start"
            @update:modalVisible="(v) => (modalVisible = v)"
            @cancelModal="approveCancel"
            @sureModal="handleOk"
            width="368px"
        >
            <template v-slot:body>
                <a-form ref="loginRef" :model="loginFrom" :style="{ width: '100%' }">
                    <a-form-item
                        show-colon
                        field="remark"
                        label="理由"
                        :rules="[{ required: modalTitle === '驳回' ? true : false, minLength: modalTitle === '驳回' ? 5 : 0, message: '请输入至少5个字符' }]"
                    >
                        <a-textarea 
                            :style="{height: '72px'}"
                            v-model="loginFrom.remark"
                            :placeholder="modalTitle === '驳回' ? '请输入至少5个字符' : ''"
                        > 
                        </a-textarea>
                    </a-form-item>
                </a-form>
            </template>
        </modal-dialog>
    </PageCaontainer>
    
</template>


<style lang="scss" scoped>
.dot-col {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.approva-index-detail-check {
    display: flex;
    justify-content: end;
    padding-right: 18px;
    padding-top: 12px;
    padding-bottom: 12px;
    >button {
        margin-left: 12px;
    }
}

.approval-center-card {
    .approval-detal-content {
        padding: 0 18px;
        height: calc(100vh - 285px);
        
        overflow-y: auto;
        .info_container {
            height: initial;
        }
        // .approval-precess {
        //     .step-list {
        //         padding: 21px 0 16px;
        //     }
        // }
    }
    &.approvalDetailStyle {
        .approval-detal-content {
            height: calc(100vh - 338px);
        }
    }
}
.approval-center-card {
    height: 100%;
    border: none;
    :deep(.arco-card-body) {
        padding: 18px 0;
        .myApprovalDivider {
            margin-top: 7px;
            margin-bottom: 0;
        }
    }
    &.approvalDetailStyle :deep(.arco-card-body) {
        padding: 18px 0 0;
    }
}
.check-detail :deep(.arco-tabs-content) {
    padding-left: 18px;
    padding-right: 18px;

    
    height: calc(100vh - 328px);
    overflow: auto;
}
.check-detail {
    .check-detail-info {
        padding: 0 18px;
        :deep(.arco-form-item) {
            margin-bottom: 4px;
        }
    }
}
.check-detail .approval-precess {
    padding-left: 0;
    padding-right: 0;
    font-size: 16px;
    font-weight: bold;
    color: #33353B;
  }
.approval-precess {
    margin-top: 18px;
    padding-left: 18px;
    padding-right: 18px;
    overflow: hidden;
}
.inlie-login-dialog .arco-modal-body {
  padding: 18px 18px 0 12px;
  .arco-form-item {
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 18px;
    }
    // &:first-child {
    //   margin-bottom: 6px;
    // }
    .arco-col-5 {
      flex: 0 0 15%;
      width: 15%;
    }
    .arco-col-19 {
      flex: 0 0 85%;
      width: 85%;
    }
  }
}
</style>